import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import Title from '@/components/Title'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay } from 'swiper/modules'
import 'swiper/css'

export default function EquipmentUsage({ device }) {
    const [dataListOdd, setDataListOdd] = useState([])
    const [dataListEven, setDataListEven] = useState([])

    useEffect(() => {
        console.log(dataListOdd);
        setDataListOdd(device?.filter((item, index) => index % 2 !== 0))
        setDataListEven(device?.filter((item, index) => index % 2 === 0))
    }, [device])

    return (
        <div className={styles.equipment_usage_container}>
            <Title titleDescription={'认知设备使用情况'}>
                <div className='equipment-usage-container-annotation'>
                    设备数:
                    <span>{device?.length}</span>
                </div>
            </Title>

            <Swiper
                className={styles.custom_swiper}
                autoplay={{
                    delay: 10000,
                    disableOnInteraction: false,
                }}
                modules={[Autoplay]}
                loop={true}
            >
                {Array.from({ length: Math.ceil(device?.length / 2) }).map((_, index) => (
                    <SwiperSlide key={index}>
                        <div className={styles.content}>
                            <div className={styles.use} key={dataListEven?.[index]?.id}>
                                <div className={`${styles.state} ${dataListEven?.[index]?.work === 2 ? styles.inUse : ''}`}>
                                    <div className={styles.dian}></div>
                                    {dataListEven?.[index]?.work === 2 ? '使用中' : '空闲中'}
                                </div>
                                <div className={styles.device_number}>{dataListEven?.[index]?.name}</div>
                                <div className={styles.train_number}>
                                    训练次数<span>{dataListEven?.[index]?.num}</span>
                                </div>
                                <div className={styles.region}>投放区域：{dataListEven?.[index]?.address}</div>
                                <div className={styles.time}>投放时间：{dataListEven?.[index]?.signed_at}</div>
                            </div>

                            {dataListOdd?.[index] ? (
                                <div className={styles.use} key={dataListOdd?.[index]?.id}>
                                    <div className={`${styles.state} ${dataListOdd?.[index]?.work === 2 ? styles.inUse : ''}`}>
                                        <div className={styles.dian}></div>
                                        {dataListOdd?.[index]?.work === 2 ? '使用中' : '空闲中'}
                                    </div>
                                    <div className={styles.device_number}>{dataListOdd?.[index]?.name}</div>
                                    <div className={styles.train_number}>
                                        训练次数<span>{dataListOdd?.[index]?.num}</span>
                                    </div>
                                    <div className={styles.region}>投放区域：{dataListOdd?.[index]?.address}</div>
                                    <div className={styles.time}>投放时间：{dataListOdd?.[index]?.signed_at}</div>
                                </div>
                            ) : (
                                <div className={styles.useOut}></div>
                            )}
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    )
}